<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <style type="text/css">
    /* 
   1.order:排序，值越小排在前面。默认为0
   2.flex-grow:flex item的扩展
   3.flex-shrink:flex item 的收缩比例，默认为1
   4.flex-basis:
   */
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 550px;
      height: 300px;
      border: 1px solid #ccc;
      text-align: center;
      margin: 0 auto;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-evenly;
      align-items: center;
      /* flex-wrap: wrap; */
      align-content: space-evenly;
    }

    .wrap>.item {
      width: 200px;
      height: 100px;
      line-height: 100px;
    }

    .wrap>.item:nth-child(1) {
      background-color: red;
      /* flex-grow: 0.2 */
      flex-shrink: 0.5
    }

    .wrap>.item:nth-child(2) {
      background-color: pink;
      order: 10;
      /* flex-grow: 0.2 */
      flex-shrink: 0.5
    }

    .wrap>.item:nth-child(3) {
      background-color: blue;
      order: 5;
      /* flex-grow: 0.2 */
    }

    .wrap>.item:nth-child(4) {
      background-color: purple;
      order: 3
    }
  </style>

  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <strong>我不换行</strong>
  </body>

</html>